import React, { Component } from "react";
import { NavBar, Carousel, Flex} from "antd-mobile";
import "./home.scss";
import { withRouter } from "react-router-dom";
import {getHomeSwiper,getHomeNav,getHomeGoods} from "../../store/action/actions"
import {connect} from "react-redux"
class home extends Component {
  state = {
    imgHeight: 178
  };
  handleClick = () => {
    this.props.history.push("/search");
  };
  handleClick1 = (id) => {
    this.props.history.push("/goods/" + id);
  };
  handleClick2 = (name) => {
    this.props.history.push("/goodsList/" + name);
  };
  handleImgClick = (name) => {
    this.props.history.push("/goodsList/" + name);
  };
  componentDidMount() {
    this.props.getSwiper("/home/swiperdata")
    this.props.getNav("/home/catitems")
    this.props.getGoods("/home/floordata")
  }
  render() {
    let { list, shop } = this.props;
    return (
      <div className="ygHome">
        {/* 标题栏开始 */}
        <div className="ygHomeTitle">
          <NavBar> 优购商城 </NavBar>
        </div>
        {/* 标题栏结束 */}
        {/* 搜索框开始 */}
        <div className="ygHomeScour">
          <span className="tgScour" onClick={this.handleClick}>
            搜索
          </span>
        </div>
        {/* 搜索框结束 */}
        {/* 轮播图开始 */}
        <div className="ygShopBanner">
          {/* 判断是否有有数据没有不加载,; */}
          {!!this.props.arr.length && (
            <Carousel autoplay={true} infinite>
              {this.props.arr.map((val) => (
                <div
                  key={val.goods_id}
                  onClick={this.handleClick1.bind(this, val.goods_id)}
                  style={{
                    display: "inline-block",
                    width: "100%",
                    height: this.state.imgHeight,
                  }}
                >
                  <img
                    src={val.image_src}
                    alt=""
                    style={{ width: "100%", verticalAlign: "top" }}
                    onLoad={() => {
                      // fire window resize event to change height
                      window.dispatchEvent(new Event("resize"));
                      this.setState({ imgHeight: "auto" });
                    }}
                  />
                </div>
              ))}
            </Carousel>
          )}
        </div>
        {/* 导航栏开始 */}
        <div className="ygHomeNav">
          <Flex>
            {list.map((v) => (
              <Flex.Item
                key={v.image_src}
                onClick={this.handleClick2.bind(this, v.name)}
              >
                <img src={v.image_src} alt="" />
              </Flex.Item>
            ))}
          </Flex>
        </div>
        {/* 导航栏结束 */}
        {/* 内容开始 */}
        <div className="ygHomeContent">
          {shop.map((v) => (
            <div key={v.floor_title.image_src} className="productData-item">
              <div className="product-title">
                <img src={v.floor_title.image_src} alt="" />
              </div>
              <div className="product-image-list">
                {v.product_list.map((ele) => (
                  <div
                    className="image-list-item"
                    key={ele.image_src}
                    onClick={this.handleImgClick.bind(this, ele.name)}
                  >
                    <img src={ele.image_src} alt="" />
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
        {/* 内容结束 */}
      </div>
    );
  }
}
const mapState=(store)=>{
    return {
      arr:store.HOME.arr,
      list:store.HOME.list,
      shop:store.HOME.shop
    }
}
const mapAction=(dispatch)=>{
    return {
      //异步接口的第一个派发对应的action
        getSwiper:(params)=>dispatch(getHomeSwiper(params)),
        getNav:(params)=>dispatch(getHomeNav(params)),
        getGoods:(params)=>dispatch(getHomeGoods(params)),

    }
}
export default  connect(mapState,mapAction)(withRouter(home))

